import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, Description, Price } from '../../../../widget/Text'
import { BoxShadow } from 'react-native-shadow'

type Props = {
    info: Object,//商品信息
    OnPress: Function,//点击商品事件
}


class NewPersonRecommendItem extends PureComponent<Props>{
    render() {

        return (
            <BoxShadow setting={shadowOpt}>
                <TouchableOpacity style={styles.contain} onPress={() => this.props.OnPress(this.props.info.id)}>
                    {/*左边的文字*/}
                    <View style={styles.textView}>
                        <Title numberOfLines={1}>{this.props.info.title}</Title>
                        <Description numberOfLines={1}>{this.props.info.description}</Description>
                        <View flexDirection={'row'} marginTop={3}>
                            <Description >会员价：</Description>
                            <Price style={styles.price}>¥{this.props.info.price}</Price>
                        </View>
                    </View>
                    {/*右边的图*/}
                    <Image style={styles.Image} resizeMode='contain' source={{ uri: this.props.info.imageUrl, cache: 'force-cache' }} />
                </TouchableOpacity>
            </BoxShadow>
        );
    }
}
const shadowOpt = {
    width: screen.width * 0.889,
    height: screen.width * 0.222,
    color: "#000",
    border: 2,
    radius: 8,
    opacity: 0.25,
    x: 0,
    y: 1,
    style: {
        marginTop: 10,
    }
}

const styles = StyleSheet.create({
    contain: {
        width: screen.width * 0.889,
        height: screen.width * 0.222,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        borderRadius: 8,
        backgroundColor: '#FFFFFF',
        paddingTop: 20,
        paddingBottom: 20,
        paddingLeft: screen.width * 0.075,
        paddingRight: screen.width * 0.059,
    },
    Image: {
        width: screen.width * 0.116,
        height: screen.width * 0.116,
        marginRight: screen.width * 0.059,
    },
    textView: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        marginLeft: screen.width * 0.075,
        marginRight: 10,
    },
    price: {
        fontSize: 10,
        color: '#FF7F00',
        // marginTop: 3,
    }
})

export default NewPersonRecommendItem